.l2.video-management{
  $color: #fff;
  $colorOn: #F9FF6C;
  .video-body{
    color: $color;
    background: url("~@/assets/image/video_ly/video-bg-ly.png") no-repeat center / 100% 100% #041822;
    .video-nav{
      .nav-item{
        color: #0DC985;
        &:before{
          content: "";
          width: 38px;
          height: 8px;
          background: url("~@/views/pages/video/img/video-ly/nav_top.png") no-repeat center / 100% 100%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          pointer-events: none;
        }
        &.cuur{
          color: $color;
          text-shadow: 0 0 18px rgba(0,245,193,0.7);
          &:before{
            background: url("~@/views/pages/video/img/video-ly/nav_top_on.png") no-repeat center / 100% 100%;
          }
          &:after{
            background: url("~@/views/pages/video/img/video-ly/nav_bottom.png") no-repeat bottom center / 100% auto, url("~@/views/pages/video/img/video-ly/nav_bg.png") no-repeat center / auto 100%;
          }
        }
      }
      .left-change{
        color: $color;
      }
      &:after{
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
      }
    }
    .video-left{
      background: linear-gradient( 180deg, rgba(0,67,63,0.85) 0%, rgba(0,19,30,0.74) 21%, #00131E 100%);
      border-right: 1px solid #075B4A;
      .tree-more{
        i{
          color: $color;
        }
        &:before, &:after{
          background: rgba(255, 255, 255, 0.2);
        }
      }
      .camera-tree{
        .el-tree{
          .el-tree__empty-text{
            color: $color;
            &:before{
              content: url("~@/assets/image/noData-ly.png");
            }
          }
        }
      }
      .icon-on{
        color: $colorOn !important;
      }
    }
    .video-right{
      .plug-in-switch{
        border: 1px dotted rgba(2, 137, 109, 0.15);
        background: none;
        color: #0DC985;
        line-height: 30px;
        border-radius: 0;
        &:after{
          content: "";
          width: calc(100% - 2px);
          height: calc(100% - 2px);
          position: absolute;
          left: 1px;
          top: 1px;
          z-index: -1;
          background: rgba(2,137,109,0.2);
          box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
        }
        .item{
          color: #0DC985;
          &.on{
            background: rgba(2, 137, 109, 0.3);
            box-shadow: inset 0px 0px 13px 0px rgba(0, 255, 248, 0.6);
            color: $color;
          }
        }
        b{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
          &:before, &:after {
            content: "";
            width: 5px;
            height: 5px;
            background: url("~@/assets/image/video_ly/btn-j.png") center / 100% 100%;
            position: absolute;
          }
          &:first-child {
            &:before {
              left: 0;
              top: 0;
            }
            &:after {
              right: 0;
              top: 0;
              transform: rotate(90deg);
            }
          }
          &:last-child {
            &:before {
              right: 0;
              bottom: 0;
              transform: rotate(180deg);
            }
            &:after {
              left: 0;
              bottom: 0;
              transform: rotate(270deg);
            }
          }
        }
      }
      .plug-in-btn{
        .item{
          color: $color;
          &.on{
            color: $colorOn;
            &:before{
              content: "";
              width: 100%;
              height: 100%;
              border: 1px dotted rgba(2, 137, 109, 0.15);
              position: absolute;
              left: 0;
              top: 0;
              z-index: -1;
              background: url("~@/assets/image/video_ly/btn-lt.png") no-repeat left top, url("~@/assets/image/video_ly/btn-lb.png") no-repeat left bottom, url("~@/assets/image/video_ly/btn-rt.png") no-repeat right top, url("~@/assets/image/video_ly/btn-rb.png") no-repeat right bottom;;
              pointer-events: none;
            }
            &:after{
              content: "";
              width: calc(100% - 4px);
              height: calc(100% - 4px);
              position: absolute;
              left: 2px;
              top: 2px;
              z-index: -1;
              background: radial-gradient( 0% 79% at 50% 50%, rgba(104,255,251,0.3) 0%, rgba(104,255,251,0.25) 28%, rgba(104,255,251,0) 100%), rgba(2,137,109,0.3);
              box-shadow: inset 0px 0px 4px 0px rgba(2,137,109,0.6);
              border: 1px solid #02896D;
              pointer-events: none;
            }
          }
        }
      }
      .video-real, .video-history{
        .video-play{
          .play-item{
            .closed{
              background: url("~@/views/pages/video/img/video-ly/close.png") no-repeat center / 100% 100%;
            }
          }
        }
        .video-play-opt-bottom{
          background: rgba(2, 137, 109, 0.1);
          &.center{
            background: #001F26;
          }
          .play-opt-btns{
            .item{
              color: $color;
              &.on{
                color: $colorOn;
                &:before{
                  content: "";
                  width: 100%;
                  height: 100%;
                  border: 1px dotted rgba(2, 137, 109, 0.15);
                  position: absolute;
                  left: 0;
                  top: 0;
                  z-index: -1;
                  background: url("~@/assets/image/video_ly/btn-lt.png") no-repeat left top, url("~@/assets/image/video_ly/btn-lb.png") no-repeat left bottom, url("~@/assets/image/video_ly/btn-rt.png") no-repeat right top, url("~@/assets/image/video_ly/btn-rb.png") no-repeat right bottom;;
                  pointer-events: none;
                }
                &:after{
                  content: "";
                  width: calc(100% - 4px);
                  height: calc(100% - 4px);
                  position: absolute;
                  left: 2px;
                  top: 2px;
                  z-index: -1;
                  background: radial-gradient( 0% 79% at 50% 50%, rgba(104,255,251,0.3) 0%, rgba(104,255,251,0.25) 28%, rgba(104,255,251,0) 100%), rgba(2,137,109,0.3);
                  box-shadow: inset 0px 0px 4px 0px rgba(2,137,109,0.6);
                  border: 1px solid #02896D;
                  pointer-events: none;
                }
              }
              .split-screen{
                background: rgba(0, 34, 27, 0.95);
                &:after{
                  border-top-color: rgba(0, 34, 27, 0.95);
                }
              }
            }
          }
        }
      }
    }
    .video-set{
      background: #00131E;
      &:before{
        background: #00191F;
      }
    }
    .el-loading-mask{
      background: none;
      .el-loading-spinner .path{
        stroke: $color;
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(2, 137, 109, 0.4);
      &:hover {
        background-color: rgba(2, 137, 109, 0.55);
      }
    }
  }
}
